<template>
  <div class="app-container container">
    <header-top style="z-index:10" />
    <div class="home-img">
      <el-carousel trigger="click" height="725px" arrow="always" :interval="5000" :autoplay="true" @change="changeCarousel">
        <el-carousel-item>
          <div class="banner banner2">
            <div class="width_1200">
              <div class="title font_66">
                钢管现货查询
              </div>
              <div class="search-box">
                <selecter v-if="options.length>0" ref="type" v-model="form.pipeTypeId" class="search-select"
                  :options="options" name="name" val="id" @change="typeChange" />
                <selecter ref="material" v-model="form.materialId" class="search-select" :options="material"
                  name="name" val="id" placeholder="请选择材质" @change="materialChange" />
                <selecter ref="standard" v-model="form.standardId" class="search-select"
                  :options="standard" name="name" val="id" placeholder="请选择标准" />
                <el-input v-model="form.specification" class="search-input" placeholder="请输入规格" />
                <div class="banner-btn" @click="toSeller">
                  现货查询
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item><el-carousel-item>
          <div class="banner banner1">
            <div class="width_1200">
              <div class="title font_66">
                供应链 金融服务
              </div>
              <div class="line" />
              <p class="text">
                我们为钢管行业上下游提供专业金融服务，解决企业融资难、成本高等问题
              </p>
              <div class="apply banner-btn" @click="goDetail('')">
                了解服务
              </div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="banner banner3" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content-top">
      <div class="absolute width_1200">
        <div class="item">
          <div class="title">
            预先垫付<img src="@/static/imgs/yuxian.png" alt="">
          </div>
          <div class="text">
            没钱买钢板? 我们帮您垫付
          </div>
          <div class="detail-btn" @click="goDetail(1)">
            查看详情
          </div>
        </div>
        <div class="item">
          <div class="title">
            风险承担<img src="@/static/imgs/fengxian.png" alt="">
          </div>
          <div class="text">
            收款难、回款周期长？我们来承担
          </div>
          <div class="detail-btn" @click="goDetail(2)">
            查看详情
          </div>
        </div>
        <div class="item">
          <div class="title">
            外贸帮助<img src="@/static/imgs/waimao.png" alt="">
          </div>
          <div class="text">
            外贸生意来了，没钱怎么办？找我们帮您解决
          </div>
          <div class="detail-btn" @click="goDetail(3)">
            查看详情
          </div>
        </div>
        <div class="item">
          <div class="title">
            资金借贷<img src="@/static/imgs/zijin.png" alt="">
          </div>
          <div class="text">
            没钱买钢管？我们帮您解决
          </div>
          <div class="detail-btn" @click="goDetail(4)">
            查看详情
          </div>
        </div>
      </div>
      <!-- <div class="content-price  width_1200">
        <div class="price-left">
          <img class="price-img" src="@/static/imgs/xian.png" alt="">
          <div class="title">价格走势</div>
          <div class="title-en">PRICE TREND</div>
          <div class="chart-label" :class="chartActive === 1 ? 'active' : ''">
            <a @click="selectChart(1)">
              <span class="num">01</span>
              <span>钢板每日价格走势</span>
            </a>
            <span class="line"></span>
          </div>
          <div class="chart-label" :class="chartActive === 2 ? 'active' : ''">
            <a @click="selectChart(2)">
              <span class="num">02</span>
              <span>钢板月结算价格走势</span>
            </a>
            <span class="line"></span>
          </div>
        </div>
        <div class="price-right">
          <div v-if="chartActive === 1">
            <div class="btn-group">
              <el-select v-model="gcId" size="small" class="select-width" @change="gcChange">
                <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="proId" size="small" class="select-width" @change="prodChange">
                <el-option v-for="(item, index) in prods" :key="index" :label="item.name" :value="item.key" />
              </el-select>
            </div>
            <ve-line class="v-line" :data="chartData" :settings="chartSettings" :extend="extend"></ve-line>
          </div>
          <div v-else>
            <div class="btn-group">
              <span class="btn-item active">中铁</span>
            </div>
            <ve-line class="v-line" :data="monData" :settings="monSettings" :extend="extend"></ve-line>
          </div>
        </div>
      </div> -->
    </div>
    <div class="content-btm">
      <div class="width_1200">
        <div class="title">
          <div class="select">
            SELECTED
          </div>
          <span class="text">优质厂家</span>
        </div>
        <div class="logo-box">
          <div class="title-box">
            <div v-for="(item, index) in options" :key="index" class="title-item" :class="active===item.id ? 'active' : ''" @click="changeType(item)">
              {{ item.name }}
            </div>
          </div>
          <div class="content-box">
            <el-carousel trigger="click" height="228px" :autoplay="true">
              <el-carousel-item v-for="(item, idx) in lists" :key="idx">
                <div class="carousel">
                  <div v-for="temp in item.pages" :key="temp.id" class="carousel-item" style="cursor: pointer;" @click="toCompany(temp.orgId)">
                    <img :src="temp.image">
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <foot />
    <go-top ref="goTop" style="z-index: 11" />
    <el-dialog title="账号升级" :visible="dialogVisible" :modal="false" width="400px" @close="cancel">
      <div class="dialog flex">
        <img src="@/static/imgs/update.png" width="90px" alt="">
        <div class="dialog-right">
          <span>您已注册成为个人账户，现在升级为企业账户即可发布供应信息！</span>
          <div style="margin-top: 6px;">
            是否要升级？
          </div>
          <div class="btns">
            <a class="btn-item" @click="cancel">下次再说</a>
            <a class="btn-item active" @click="toUpdate">去升级</a>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="未登录" :visible.sync="visible" width="400px" @close="cancel">
      <div class="dialog-right">
        <div class="item">
          登录后可查看企业发布的供应信息
        </div>
        <div class="btns">
          <a class="btn-item" @click="visible = false">关闭</a>
          <a class="btn-item active" @click="toLogin">去登录</a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import headerTop from '@/components/global/header'
import foot from '@/components/global/footer'
import selecter from '@/components/global/select'
import goTop from '@/components/global/goTop'
import api from '@/assets/api/home'
import apiMy from '@/assets/api/my'
import utils from '@/assets/utils'
export default {
  components: { headerTop, foot, selecter, goTop },
  data () {
    this.chartSettings = {
      labelMap: {
        'ck': '参考价',
        'cj': '成交价'
      },
      min: [3300, 3700]
    }
    this.monSettings = {
      labelMap: {
        'rj': '热卷'
      }
    }
    this.extend = {
      'xAxis.0.axisLabel.rotate': 0
    }
    return {
      isFirst: true,
      isShow: false,
      isSearch: false,
      dialogVisible: false,
      visible: false,
      chartActive: 1,
      active: 1, // 石油套管id
      gcId: 3, // 线上
      // gcId: 140, // 测试
      proId: 'dg',
      prods: [],
      chartData: {
        columns: ['date', 'ck', 'cj'],
        rows: []
      },
      monData: {
        columns: ['yearMonth', 'rj'],
        rows: []
      },
      list: [],
      monList: [],
      form: {
        pipeTypeId: 1,
        materialId: '',
        standardId: '',
        specification: ''
      },
      options: [],
      province: [],
      material: [],
      standard: [],
      lists: []
    }
  },
  computed: {
    isCompany () {
      const type = this.$store.state.user.type
      const flag = type === 'ENTERPRISE'
      return flag
    }
  },
  created () {
    const token = utils.getCookies('token')
    if (token) {
      if (utils.getCookies('isFirst')) {
        this.isFirst = false
      } else {
        this.isFirst = true
      }
      this.dialogVisible = !this.isCompany && this.isFirst
    }
    // this.getPrice()
    // this.getMonPrice()
    this.getPipe()
    this.getMaterial(this.form.pipeTypeId)
    this.getFeature()
  },
  methods: {
    changeCarousel (index) {},
    selectChart (index) {
      this.chartActive = index
    },
    showChart (flag) {
      this.isShow = flag
      if (!flag) {
        this.chartData.rows = this.list[0].list
      } else if (this.list.length > 1) {
        this.chartData.rows = this.list[1].list
      } else {
        this.chartData.rows = []
      }
    },
    goDetail (index) {
      this.$router.push({
        path: '/financialInfo/detail',
        query: {
          flag: index
        }
      })
    },
    goApply () {
      this.$router.push('/financialInfo/apply')
    },
    getPrice () { // 折线图数据
      api.getPrice().then((res) => {
        const data = res.data.data
        data.forEach((item) => {
          if (this.gcId === item.id) {
            this.prods = item.prod
            this.proId = item.prod[0].key
            this.chartData.rows = this.calChart(item[this.proId])
          }
        })
        this.list = data
        // this.chartData.rows = this.list[0].list
      })
    },
    gcChange (val) {
      this.gcId = val
      this.list.forEach((item) => {
        if (this.gcId === item.id) {
          this.prods = item.prod
          this.proId = item.prod[0].key
          this.chartData.rows = this.calChart(item[this.proId])
        }
      })
    },
    prodChange (val) {
      this.proId = val
      this.list.forEach((item) => {
        if (this.gcId === item.id) {
          this.prods = item.prod
          this.chartData.rows = this.calChart(item[this.proId])
        }
      })
    },
    calChart (arr) {
      const array = arr.map((item) => {
        for (const i in item) {
          if (item[i] === 0) {
            item[i] = ''
          }
        }
        return item
      })
      return array
    },
    getMonPrice () { // 月度折线图数据
      api.getMonPrice().then((res) => {
        const data = res.data.data
        data.forEach((item) => {
          item.list.forEach((temp) => {
            if (temp.rj === 0) {
              temp.rj = ''
            }
          })
        })
        this.monList = data
        this.monData.rows = this.monList[0].list
      })
    },
    getPipe () { // 获取产品分类
      apiMy.getPipe().then((res) => {
        const data = res.data.data
        this.options = data
      })
    },
    getMaterial (type) { // 查询材质
      apiMy.getMaterial(type).then((res) => {
        this.material = res.data.data
      })
    },
    getStandard (type, material) { // 查询标准
      apiMy.getStandard(type, material).then((res) => {
        this.standard = res.data.data
      })
    },
    typeChange (val) { // 产品分类change
      this.getMaterial(val)
      this.material = []
      this.standard = []
      this.form.materialId = ''
      this.form.standardId = ''
      this.$refs.material.labelTxt = ''
      this.$refs.standard.labelTxt = ''
    },
    materialChange (val) { // 材质change
      this.getStandard(this.form.pipeTypeId, val)
      this.standard = []
      this.form.standardId = ''
      this.$refs.standard.labelTxt = ''
    },
    toSeller () { // 现货查询
      this.$router.push({
        path: '/seller/list',
        query: this.form
      })
    },
    aboutUs () {
      this.$router.push({
        path: '/aboutus',
        query: this.form
      })
    },
    getFeature () { // 获取精选厂家
      api.getFeature(this.active).then((res) => {
        const data = res.data.data
        this.lists = []
        for (let i = 0, len = data.length; i < len; i += 8) {
          this.lists.push({
            pages: data.slice(i, i + 8)
          })
        }
      })
    },
    toCompany (id) {
      const token = utils.getCookies('token')
      if (token) {
        this.$router.push({
          path: '/enterprise',
          query: {
            id: id
          }
        })
      } else {
        this.visible = true
      }
    },
    toLogin () {
      this.$router.push('/login')
    },
    changeType (item) {
      this.active = item.id
      this.getFeature()
    },
    cancel () {
      utils.setCookies('isFirst', false)
      this.dialogVisible = false
    },
    toUpdate () {
      utils.setCookies('isFirst', false)
      this.dialogVisible = false
      this.$router.push({
        path: '/account/add'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~/assets/scss/home.scss';
.home-img{
  .banner1{
    background-image: url('~static/imgs/home_img4.jpg');
  }
  .banner2{
    background-image: url('~static/imgs/home_img2.jpg');
  }
  .banner3{
    background-image: url('~static/imgs/bj_8.jpg');
  }
}
.content-btm{
  background-image: url('~static/imgs/bj_2.png');
  .logo-box{
    .title-box{
      .title-item.active{
        background-image: url('~static/imgs/qiehuan.png');
      }
    }
  }
}
.select-width{
  width: 100px;
}
.flex{
  display: flex;
  align-items: center;
}
.dialog-right{
  padding-left:20px;
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btns{
    text-align: right;
    padding-top: 15px;
  }
  .btn-item{
    font-size: 12px;
    display: inline-block;
    width: 70px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #CCAD89;
    border-radius: 18px;
    color: #BD9D72;
    margin-left: 10px;
    &.active{
      background-image: linear-gradient(-180deg, #F7E0C3 0%, #BDA280 100%);
      color: #222222;
      font-weight: bold;
    }
  }
}
</style>
